<template>
  <div id="homePage" class="wrapper w-100 h-100">
    <header class="d-flex justify-content-between align-items-center">
      <div class="h_l float-left d-flex justify-content-between justify-content-center">
<!--        <h1 class="logo"></h1>-->
        <h2 @click="showMenu=!showMenu">{{global.systemName}}</h2>
      </div>
      <ul class="h_menu_group">
        <li class="menu_item cursor_p" v-for="(menu,index) in menus" :class="{active:currentMenu==menu.name}" @click="changeMenu(menu,0)">
          <template v-if="index==0">
              <i class="iconfont icon-zhuye font20"></i>主站
          </template>
          <template v-else><i class="iconfont font20" :class="'icon-'+menu.icon"></i>{{menu.name}}</template>
        </li>
      </ul>
      <ul class="h_r float-right d-flex justify-content-between justify-content-center">
        <li class="d-flex align-items-center cursor_p" @click="showEditPwd=true">
          <i class="iconfont icon-user mr-2"></i>
          <div>{{userInfo.userName}}</div>
        </li>
        <li @click="toPage('login')">
          <i class="iconfont icon-logout mr-2"></i>
          <div>退出</div>
        </li>
      </ul>
    </header>
    <!--背景图1-->
    <div class="frame_bg"></div>
    <div class="frame_bg2"></div>
    <div class="d-flex frameWrapper" style="position: absolute;" :style="{height:clientHeight+40+'px'}">
      <!--菜单栏-->
      <div class="sidebar h-100">
        <ul class="sidebar-group">
          <li class="sidebar-group-item meau-item" v-for="(submenu,index) in submenus"  @click="changeSubMenu(submenu)"
              :class="{active:menuActive==submenu.id}">
            <i class="iconfont" :class="'icon-'+submenu.icon"></i>
            <span>{{submenu.name}}</span>
            <i class="iconfont icon-zhankai m-0 d-inline-block float-right" style="transform: rotate(-90deg)"></i>
          </li>
        </ul>
      </div>
      <div class="content" style="flex: 1;">
<!--         :class="classObject" -->
        <div class="content_body scrollY" :style="{height:clientHeight+'px',width:clientWidth+'px'}" style="overflow-x: hidden;padding: 10px 10px 0 10px;">
          <!--<keep-alive>-->
          <router-view></router-view>
          <!--</keep-alive>-->
        </div>
        <footer class="copyright w-100">
          <div class="float-left">{{global.copyright}}</div>
          <div class="float-right">版本号：V1.1.2</div>
        </footer>
      </div>
    </div>

    <!--修改密码-->
    <el-dialog v-el-drag-dialog title="修改密码" :visible.sync="showEditPwd" width="460px" :center="true" top="15%">
      <template v-if="showEditPwd">
        <edit-pwd :type="'loginPwd'" @closeEditPwd="closeEditPwd"></edit-pwd>
      </template>
    </el-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations, mapState} from 'vuex'
  import api from 'api/api'
  import elDragDialog from 'directive/el-dragDialog'
  import editPwd from 'base/editPwd/editPwd'

  export default {
    inject:['reload'],
    directives:{elDragDialog},
    components: {editPwd},
    props: {},
    data() {
      return {
        menus:[],
        submenus:[],
        showMenu:false,
        currentMenu:'系统维护',
        alarmNum:0,
        noticeCount:0,
        isAlarm:true,
        hasWorks:true,
        showSidebar:true,
        menuId:'',
        showEditPwd:false,
      }
    },
    watch: {
      menuId(url){
        this.menus.map(menu=>{
          if (menu.id == url.split('_')[0]) {
            this.changeMenu(menu, 1)
          }
        })
      }
    },
    computed:{
      classObject(){
        return {
          'px-4': ['1_01','4','9'].indexOf(this.menuActive)==-1,
          'pt-4': ['1_01','4','9'].indexOf(this.menuActive)==-1,
          'pt-1': ['1_01','4','9'].indexOf(this.menuActive)==-1,
        }
      },
      ...mapState({
        clientWidth: state =>{
          if(['4','6','8','9','9_01_00_05'].indexOf(state.comm.menuActive)!=-1){//gis
            return state.comm.clientWidth+180
          }else{
            return state.comm.clientWidth
          }
        },
        menuActive: state => state.comm.menuActive,
        clientHeight:state=>state.comm.clientHeight,
        path: state => state.comm.path,
        userInfo:state=>state.user.userInfo,
        roleId:state=>state.user.userInfo.roleId,
        limits:state=>state.user.userInfo.limits,
        path2:state=>state.comm.path2,
        responseStatus:state=>state.comm.responseStatus
      })
    },
    methods: {
      closeEditPwd(val){
        this.showEditPwd=val
      },
      toPage(url){
        this.$router.replace({path:'/'+url})
        if (url == 'notice') this.reload()
        if(url=='login'){
          this.$store.commit('user/SET_USER_TOKEN', [])
          this.$store.commit('user/SET_USER_INFO',{})
        }else{
          if(this.responseStatus!='402'){
            this.setPath(url)
            this.reload()
          }
        }
      },
      showBadge(menu){
        if((menu.id==2&&this.isAlarm)||(menu.id==3&&this.hasWorks)){
          return true
        }else{
          return false
        }
      },
      changeMenu(menu,isReload){
        // if(menu.id==0){
        //   return this.$router.replace('/')
        // }
        if(menu.url.indexOf('114.55.251.42')!=-1) {
          window.open(menu.url)
        }else{
          this.$store.commit('user/SET_USER_PWD', null)
          this.currentMenu=menu.name
          this.showMenu=false
          let menus=window.global.menus
          for(let i=0;i<menus.length;i++){
            if(menu.id==menus[i].id){
              this.submenus=menus[i].submenus
            }
          }
          if(!isReload){//主菜单跳转
            this.setPath(menu.url)
            // if(menu.id==3){
            //   this.$router.replace({path: '/frame/' + menu.url})
            // }else{
              this.$router.replace({path: '/' + menu.url})
            // }
          }else{//页面刷新
            if(this.$route.path.indexOf(this.path)!=-1){
              if(!this.common.isEmpty(this.$route.query)){
                let params=this.$route.query
                let str=''
                for(let key in params){
                  str+=key+'='+params[key]+'&'
                }
                this.$router.replace({path:this.$route.path+'?'+str.substr(0,str.length-1)})
              }else{
                this.$router.replace({path:this.$route.path})//跳转到嵌套页里的路由 例如：/handController/lightController
              }
            }
            else{
              this.$router.replace({path:'/'+this.path})
            }
          }
        }
      },
      changeSubMenu(menu){
        this.setPath(menu.url)
        let paths = this.$route.path.split('/')
        if (paths.length == 3 && paths.indexOf(menu.url) != -1) {
          this.$router.replace({path: this.$route.path})
        } else {
          this.$router.replace({path: '/' + menu.url})
        }
      },
      queryNoticeCount(){
        api.fetchSimple('/Notice/QueryNoticeCount')
          .then(r=>{
            this.noticeCount=r.data
          })
      },
      ...mapMutations({
        setPath: 'comm/SET_PATH',
        setResize: 'comm/SET_RESIZE',
      })
    },
    created() {
      this.setResize({clientWidth:document.body.clientWidth - 180,clientHeight:document.body.clientHeight-100})
      this.menus=[
        {id:0,name:'主页',url:'main',icon:'zhuye'},
        {id:1,name:'数据统计',url:'dashboard',icon:'tongji'},
        {id:4,name:'地图监控',url:'map',icon:'gis'},
        // {id:1,name:'数据统计',url:'dashboard2',icon:'tongji'},
        // {id:2,name:'运行管理',url:'user',icon:'yunxing'},
        {id:3,name:'系统维护',url:'work',icon:'weihu'},
      ]
      let that = this
      window.onresize = function () {
        that.setResize({clientWidth:document.body.clientWidth - 180,clientHeight:document.body.clientHeight-100})
      }
      if(this.path2){//综合展示-报警
        this.setPath(this.path2.substr(1))
      }else{
        this.setPath(this.$route.path.substr(1))
      }
      this.menuId=this.menuActive.split('-')[0]
      if(this.$route.query.menuId){//从主页点击模块跳转
        this.menuId=this.$route.query.menuId
      }
    },
    mounted() {
    },
    activated(){}
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  #homePage{background:#132B91;
    header{
      padding:0 10px;background: rgba(0, 0, 0, 0.2);color:#fff;height: 60px;box-shadow: 2px 0 2px rgba(0, 0, 0, .5);
      .h_l{display:flex;height:100%;align-items:center;
       // h1{width:91px;height:24px;background:url("~static/image/risecomm.png") no-repeat;background-size:100% 100%;}
        h2{margin-left:7px;font-size: 20px;font-weight: 400;}
      }
      .h_menu_group{
        .menu_item{position:relative;float:left;font-size:18px;width:120px;height:60px;line-height:60px;text-align:center;color:#0099FF;font-weight: 400;
          background:rgba(0,0,0,.1);
          &.active,&:hover{background:url("~static/image/frame/menu1.png") no-repeat;color:#F2F2F2;}
          .ur-badge{position:absolute;right:6px;top:8px;display:inline-block;width: 8px;height: 8px;border-radius: 100%;background: #FF4F20;}
        }
      }
      .h_r{
        /* width:250px;*/
       display:flex;align-items:center;
        li{display:flex;height:34px;align-items:center;margin-right:10px;border:1px solid rgba(0, 119, 255, 0.5);background:rgba(0,119,255,0.1);padding:7px 8px;
          .iconfont{font-size: 20px;margin: 0;}
          &.alarmWrap .info{position: absolute;top:6px;right:-14px;width: 24px;height: 16px;line-height:16px;background-color: #ff6e6a;border-radius: 16px;font-size: 12px;text-align: center;}
        }
      }
    }
    footer{height: 40px;line-height:40px;color: #0099FF;padding:0 10px;font-size:12px;}
    .frame_bg{position:fixed;bottom:0;left:0;width:100%;height:658px;background:url("~static/image/frame/frame_bg.png") no-repeat;background-size: contain;background-position:bottom;}
    .frame_bg2{position:fixed;bottom:35px;right:0;width:409px;height:294px;background:url("~static/image/frame/frame_bg2.png") no-repeat;background-size: contain;background-position:bottom;}
    .sidebar {width: 180px;overflow-y: auto;overflow-x: hidden;background:rgba(0,0,0,.2);
      .sidebar-group .sidebar-group-item{background-color:transparent;color: #0099FF;height:46px;line-height:46px;
        margin-top: 1px;padding:0 15px 0 30px;cursor: pointer;transition: color 1.2s,background 1.2s;
        &:hover,&.active {color: #fff;background:url("~static/image/frame/menu2.png") no-repeat;}
        .iconfont {font-size: 20px;margin-right: 8px;
          &.icon-triangle{transform: rotate(90deg)}
        }
      }
    }
  }
</style>
